<template>
  <div>
    <el-form :model="curAddrFrom" :rules="rulesaddr" ref="addrForm">
      <el-form-item label="收件地址" :label-width="formLabelWidth" prop="addr">
        <el-cascader expand-trigger="hover" ref="address" v-model="curAddrFrom.addr" :options="address" :props="props" style="width: 100%" @change="cascaderSelect" ></el-cascader>
      </el-form-item>
      <el-form-item label="详细地址" placeholder="输入您详细地址" :label-width="formLabelWidth" prop="address">
        <el-input v-model="curAddrFrom.address" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="收件人" placeholder="输入收件人姓名" :label-width="formLabelWidth" prop="name">
        <el-input v-model="curAddrFrom.name" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="手机号" placeholder="输入收件人手机号码" :label-width="formLabelWidth" prop="mobile">
        <el-input v-model="curAddrFrom.mobile" auto-complete="off" maxlength="11"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer" >
      <el-button @click="closeForm(curAddrFrom.id)">取 消</el-button>
      <el-button type="primary" :disabled="submitDisable" @click="submitForm('addrForm', curAddrFrom.id)">确 定</el-button>
    </div>
  </div>
</template>

<script>
import {Button, Form, FormItem, Input, Dialog, Cascader} from 'element-ui'
import {PHONE, TEL} from '@/config/regex'
import {addressForAll} from '@/tool/address'
import {mapState} from 'vuex'
export default {
  components: {
    elButton: Button,
    elForm: Form,
    elFormItem: FormItem,
    elInput: Input,
    elDialog: Dialog,
    elCascader: Cascader
  },
  data () {
    let checkTel = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('手机不能为空'))
      } else {
        if (PHONE.test(value)) {
          callback()
        } else if (TEL.test(value)) {
          callback()
        } else {
          return callback(new Error('手机格式不正确'))
        }
      }
    }
    return {
      address: addressForAll,
      formLabelWidth: '100px', // label宽度
      rulesaddr: {
        addr: [
          { required: true, type: 'array', message: '请选择收件地址', trigger: 'change' }
        ],
        address: [
          { required: true, message: '请输入详细地址', trigger: 'change' }
        ],
        name: [
          { required: true, message: '请输入收件人姓名', trigger: 'blur' }
        ],
        mobile: [
          {validator: checkTel, type: 'tel', required: true, trigger: 'blur'}
          // { max: 11, message: '长度为11个字符', trigger: 'change' }
        ]
      },
      props: {
        value: 'value',
        label: 'label',
        children: 'children'
      },
      curAddrFrom: {}, // 接收的值
      submitDisable: false // 确定按钮是否禁止点击
      // curAddrFrom2: this.curAddrFrom // 接收props的值
    }
  },
  methods: {
    initData (data) {
      if (!data.id) {
        this.curAddrFrom = {
          addr: [],
          address: '',
          mobile: '',
          name: ''
        }
        this.$nextTick(() => {
          this.$refs.addrForm.resetFields()
        })
      } else {
        this.curAddrFrom = data
        this.curAddrFrom.addr = [data.provinceCode, data.cityCode, data.areaCode]
      }
    },
    // 确认按钮
    submitForm (formName, id) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.submitDisable = true
          // 触发请求
          this.$store.dispatch('fetchAddOrModArr', this.curAddrFrom).then((res, rej) => {
            this.$emit('close-dialog', id)
            this.submitDisable = false
            // this.curAddrFrom = {} // 清除接收的地址
            // this.$refs[formName].clearValidate()
          })
        } else {
          this.$message({
            message: '信息填写错误啦'
          })
          return false
        }
      })
    },
    // 取消按钮
    closeForm (id) {
      this.$emit('close-dialog', id)
    },
    cascaderSelect (curval) {
      let addrCode = this.curAddrFrom.addr
      let addrLabel = this.$refs.address.currentLabels

      this.curAddrFrom.provinceCode = addrCode[0]
      this.curAddrFrom.province = addrLabel[0]
      this.curAddrFrom.city = addrLabel[1]
      this.curAddrFrom.cityCode = addrCode[1]
      this.curAddrFrom.area = addrLabel[2]
      this.curAddrFrom.areaCode = addrCode[2]
      // let _resultAddr = []
      // for (let i = 0; i < 3; i++) {
      //   _resultAddr.push({code: addrCode[i], label: addrLabel[i]})
      // }
    }
  },
  computed: {
    ...mapState({
      modifyAddr: state => {
        return state.address.modifyAddr
      }
    })
  },
  watch: {
    modifyAddr (newValue, oldValue) {
      this.initData(newValue)
    }
  },
  mounted () {
    this.initData(this.modifyAddr)
  }
}
</script>

<style lang="scss" scoped>
  .dialog-footer{
    text-align: center;
  }
</style>
